<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
   <style>


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html , body , #app , #map {
            width: 100%;
            height: 100%;
        }

        .control-select{
            position: fixed;
            top: 0px;
            right: 10px;
            left: 10px;
            z-index: 1000;
        
        }

        .select-input{
            width: 100%;
            background-color: white;
            padding: 5px 10px;
        }

        input{
            width: 100%;
            height: 35px;
            border: none;
            outline:none;  
        }


        .select-input_start_and_end{
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(0, 0, 0, .1);
        }

        input:focus{
            outline:none; 
        }
        .select-option{
            background-color: white;
            margin-top: 5px;
            border-radius: 8px !important;
        }
        .select-option_item{
            height: 50px;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid rgba(0, 0, 0, .1);
            justify-content: space-between;
            padding: 5px 5px;
            box-sizing: border-box;
        }


        .t-boxshadow{
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
            border-radius: 0 0 8px 8px;
        }


        .pop {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 9999999;
        }

        .mask_layer {
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.7);
        }

        .pop-body{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80%;
            background-color:white
        }


        .search-btns{
            display: flex;
            justify-content: space-between;
        }
        .search-btns button{
            background-color: rgb(31, 112, 255);
            border-radius: 2px;
            margin-top: 5px;
            height: 30px;
        }
        .search-btns button:nth-child(1){
            background-color: white;
            width: 60%;
            color: rgba(0,0,0,1);
            border: 1px solid rgba(0,0,0,.2);
        }

        .search-btns button:nth-child(2){
            border: none;
            color: white;
            background-color: rgb(31, 112, 255);
            width: 35%;
        }
        .icon-closefill , .icon-shanchu1{
            color: rgba(0,0,0,.3);
            font-size: 18px;
            margin-left: 5px;
        }
        .res-box{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 160px;
            background-color: white;
            border-radius: 20px 20px 0px 0px;
            z-index: 99999;
            padding: 10px;
        }

        .res-btn{
            display: flex;
            margin-top: 10px;
            justify-content: space-between;
        }

        .res-btn button{
            width: 48%;
            height: 30px;
        }

        .res-btn button:nth-child(1){
            background-color: red;
        }

        .res-btn button:nth-child(2){
            background-color: rgb(31, 112, 255);
        }

        button{
            color: white;
            border: none;
            border-radius: 5px;
        }
        .distance-number{
            font-size: 16px;
            padding: 0 5px;
            margin-bottom: 5px;
        }
        .distance-point  img{
            width: 24px;
            height: 24px;
        }

        .distance-point > div{
            display: flex;
            align-items: center;
        }

        .distance-point  span{
            font-size: 14px;
            font-weight: 500;
        }
        .s_address_icon_img , .e_address_icon_img{
            width: 25px;
            height: 25px;
        }

   </style>
    <link rel="stylesheet" href="./css//iconfont/iconfont.css">
    <script src="./js/vue.js"></script>
    <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=a089dabb9c75cd0944e1013b54611773"
        type="text/javascript"></script>
</head>

<body>
    <div id="app">
        <div id="map">
            <div class="control-select" v-if="showInputBox">
                <div class="select-input t-boxshadow">
                    <div class="select-input_start_and_end">
                        <img class="s_address_icon_img" src="/static/mapImg/s.png" alt="">
                        <input type="text" v-model="startValue" placeholder="请选择起点" @focus="()=> type = 's'"
                            @input="searchStartAndEndLocaltion">
                        <span v-if="startValue" class="iconfont icon-closefill"
                            @click="()=> {startValue = ''; searchForm.start = ''}"></span>
                    </div>

                    <div class="select-input_start_and_end" v-for="(item , index) in searchForm.midway">
                        <img class="e_address_icon_img" src="/static/mapImg/point.png" alt="">
                        <input class="input-other" type="text" v-model="item.name" placeholder="请选择中途点"
                            @focus="()=> type = index " @input="searchStartAndEndLocaltion">
                        <div class="iconfont icon-shanchu1" v-if="searchForm.midway.length > 1"></div>
                        <span class="iconfont icon-closefill" v-if="item.name"
                            @click="searchForm.midway[index].name = ''"></span>
                    </div>

                    <div class="select-input_start_and_end">
                        <img class="e_address_icon_img" src="/static/mapImg/e.png" alt="">
                        <input type="text" v-model="endValue" placeholder="请选择终点" @focus="()=> type = 'e'"
                            @input="searchStartAndEndLocaltion">
                        <span v-if="endValue" class="iconfont icon-closefill"
                            @click="()=> {endValue = '' ; searchForm.end = ''}"></span>
                    </div>
                    <div class="search-btns">
                        <button class="search-btn" @click='onNewMidwayPoint'>新增中途点</button>
                        <button class="search-btn" @click='searchRoute'>生成路线预览</button>
                    </div>
                </div>
                <div class="select-option t-boxshadow" v-if="showOptionModal">
                    <div class="select-option_item" v-for="item , index in searchList" :key="item.hotPointID"
                        @click="onClickAddress(item)">
                        <div>{{item.address}}</div>
                        <div>{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pop" v-if='showView'>
            <div class="mask_layer" @tap="onHideView"></div>
            <div class='pop-body'>
                11
            </div>
        </div>
        <div class="res-box" v-if="showResBox">
            <div class="distance-number">
                里程:{{distance || 0}}km
            </div>
            <div class="distance-point">
                <div>
                    <img src="/static/mapImg/s.png" alt="">
                    <span>江夏区</span>
                </div>
                <div>
                    <img src="/static/mapImg/point.png" alt="">
                    <span>中途点1、中途点2、中途点3</span>
                </div>
                <div>
                    <img src="/static/mapImg/e.png" alt="">
                    <span>武汉</span>
                </div>
            </div>
            <div class="res-btn">
                <button @click='confirm'>取消</button>
                <button @click='searchRoute'>立即生成导航记录</button>
            </div>
        </div>
    </div>
</body>



<script>
    let map, zoom = '';
    let lat = '114.41';
    let log = '30.51';
    new Vue({
        el: "#app",
        data: {
            type: "",
            showView: false,
            showInputBox: true,
            showResBox: false,
            showOptionModal: false,
            startValue: "",
            endValue: "",
            distance: '',
            searchList: [],
            searchForm: {
                start: new T.LngLat(114.255240, 30.617389),
                end: new T.LngLat(111.295144, 30.702667),
                midway: [
                    {
                        name: "1",
                        latlog: new T.LngLat(109.427108, 29.976829),
                    },
                    {
                        name: "1",
                        latlog: new T.LngLat(112.447527, 29.663633),
                    }
                ]
            }
        },
        created() { },
        mounted() {
            this.initMap();
        },
        methods: {
            //初始化地图
            initMap() {
                map = new T.Map("map");
                map.centerAndZoom(new T.LngLat(lat, log), 16);
                const zoomControl = new T.Control.Zoom({
                    position: T_ANCHOR_BOTTOM_RIGHT
                })
                map.addControl(zoomControl);
            },

            //搜索
            async searchRoute() {
                //点位集合
                let _pointList = [];
                let $midway = this.searchForm.midway;
                let $start_latlog = this.searchForm.start;
                let $end_latlog = this.searchForm.end;
                //最好封装一层
                const syncCoordinate = (_s, _e) => {
                    return new Promise((resolve, rejact) => {
                        const _r = new T.DrivingRoute( map , { policy: 0 })
                        _r.search(_s, _e)
                        _r.setSearchCompleteCallback((res) => {
                            const _distance = res.getPlan(0).getDistance();
                            const _path = res.getPlan(0).getPath()
                            resolve( {_distance ,  _path })
                        })
                    })
                }

                //判断是否有中途点，
                if ($midway.length > 0 && $midway[0]['latlog']) {  
                    // 有中途点 循环调用Promise 开始位置作为第一项起始,中途点第一个位置作为结束位置,以此类推, 
                    $midway.push({ name:'11' , latlog: $end_latlog });  //把结束位置作为最后一项塞入进入,
                    let _s = $start_latlog ,  _e;
                    for (var i = 0; i <= $midway.length - 1; i++) {
                        _e = $midway[i].latlog;
                        const { _distance , _path } = await syncCoordinate(_s, _e);       
                        this.distance = Number(this.distance) + Number(_distance); //拼接所有点位的距离
                        _pointList = _pointList.concat(  _path )       
                        map.addOverLay(this.constrMarker( _e, 3))
                        _s = $midway[i].latlog;
                    }
                } else {
                    // 没有中途点位,直接调用
                    const { _distance ,  _path  } = await syncCoordinate($start_latlog, $end_latlog);       
                    this.distance = Number( _distance );     //起始点的距离  
                    _pointList = _pointList.concat(  _path  ) 
                }

                //生成起始icon
                $start_latlog && map.addOverLay(this.constrMarker($start_latlog, 1));
                $end_latlog && map.addOverLay(this.constrMarker($end_latlog, 2))
                map.addOverLay(this.onNewPolyline(_pointList))
                map.setViewport(_pointList);
                
                // 隐藏弹出层
                this.showResBox = true;
                this.showOptionModal = false;
                this.showInputBox = false
            },
            //生成点
            constrMarker(latlog, imgType) {
                let iconUrl;
                switch (imgType) {
                    case 1:
                        iconUrl = '/static/mapImg/s.png';
                        break
                    case 2:
                        iconUrl = '/static/mapImg/e.png';
                        break
                    case 3:
                        iconUrl = '/static/mapImg/point.png';
                        break
                }
                return new T.Marker(latlog, {
                    icon: new T.Icon({
                        iconUrl,
                        iconSize: new T.Point(40, 40),
                        iconAnchor: new T.Point(20, 30),
                    })
                })
            },

            // 获取搜索结果
            searchStartAndEndLocaltion() {
                const _l = new T.LocalSearch(map, {
                    pageCapacity: 6, onSearchComplete: (res) => {
                        if (res.pois.length > 0) {
                            this.showOptionModal = true;
                            this.searchList = res.pois;
                        }
                    }
                })
                const type = this.type;
                let val;
                if (typeof (type) == 'string') {
                    val = this.type == 's' ? this.startValue : this.endValue;
                } else {
                    val = this.searchForm.midway[type].name
                }
                _l.search(val, 2)
            },

            // 点击获取点之间参数
            onClickAddress(item) {
                const [lat, log] = item.lonlat.split(',');
                const type = this.type;
                if (typeof (type) == 'string') {
                    if (this.type == 's') {
                        this.startValue = item.address;
                        this.searchForm.start = new T.LngLat(lat, log)
                    } else {
                        this.endValue = item.address
                        this.searchForm.end = new T.LngLat(lat, log)
                    }
                } else {
                    this.searchForm.midway[type].name = item.address
                    this.searchForm.midway[type].latlog = new T.LngLat(lat, log)
                }
                this.showOptionModal = false
            },
            //新增中途点
            onNewMidwayPoint() {
                this.searchForm.midway.push({
                    name: "",
                    latlog: ""
                })
            },
            onNewPolyline(data = []) {
                return new T.Polyline( data , {
                    weight: 4,
                    opacity: 1,
                    color: '#0091FF',
                    lineStyle: 'solid'
                })
            },
            //取消
            confirm() {
                this.showResBox = false;
                this.showInputBox = true
            },
            onHideView() {
                this.showView = false
            },
            onShowView(){
                this.showView = true
            }
        }
    })
</script>

</html>